import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { defineComponent, ref, computed, type PropType, nextTick, watch } from "vue";
import {
    delay,
    cloneDeep,
    isBoolean,
    isFunction,
    getKeyList
} from "@pureadmin/utils";

import Sortable from "sortablejs";
import DragIcon from "./svg/drag.svg?component";
import ExpandIcon from "./svg/expand.svg?component";
import RefreshIcon from "./svg/refresh.svg?component";
import SettingIcon from "./svg/settings.svg?component";
import CollapseIcon from "./svg/collapse.svg?component";

const props = {
    /** 头部最左边的标题 */
    title: {
        type: String,
        default: "列表"
    },
    /** 需要展示的列 */
    columns: {
        // type: Array as PropType<TableColumnList>,
        type: Array as PropType<TableColumnList>,
        default: () => []
    },
    // 表格尺寸
    size: {
        type: String,
        default: 'default'
    }
};

// 导出一个默认的Vue组件定义
export default defineComponent({
    // 组件名称
    name: "PureTableBar",
    // 组件接收的props
    props,
    // 组件可以触发的事件
    emits: ["refresh"],
    // 组件的setup函数，用于定义组件的响应式状态和方法
    setup(props, { emit, slots, attrs }) {
        // 使用ref创建响应式变量size，并初始化为props中的size属性的深拷贝
        const size = ref(cloneDeep(props?.size));
        // 使用ref创建响应式变量loading，并初始化为false，用于控制加载状态
        const loading = ref(false);
        // 使用ref创建响应式变量dynamicColumns，并初始化为props中的columns属性的深拷贝
        const dynamicColumns = ref(cloneDeep(props?.columns));
        // 使用computed计算属性iconClass，返回一个包含多个类名的数组
        const iconClass = computed(() => {
            return [
                "text-black", // 文本颜色为黑色
                "dark:text-white", // 在暗模式下，文本颜色为白色
                "duration-100", // 过渡动画的持续时间为100毫秒
                "hover:!text-primary", // 鼠标悬停时，文本颜色强制变为主要颜色
                "cursor-pointer", // 鼠标悬停时，光标变为手形
                "outline-none" // 移除焦点时的轮廓线
            ];
        });


        // 定义一个名为 onReFresh 的函数，用于处理刷新操作
        function onReFresh() {
            // 将 loading 的值设置为 true，表示开始加载
            loading.value = true;
            // 触发一个名为 "refresh" 的事件，通知其他部分进行刷新操作
            emit("refresh");
            // 使用 delay 函数延迟 500 毫秒，然后执行回调函数
            delay(500).then(() => (loading.value = false));
            // 回调函数中将 loading 的值设置为 false，表示加载结束
        }

        return () => (
            <>
                <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
                    <div class="flex justify-between w-full h-[60px] p-4">
                        {slots?.title ? (
                            slots.title()
                        ) : (
                            <p class="font-bold truncate">{props.title}</p>
                        )}
                        <div class="flex items-center justify-around">
                            {slots?.buttons ? (
                                <div class="flex mr-4">{slots.buttons()}</div>
                            ) : null}

                            <el-tooltip effect="dark" content="刷新" placement="top">
                                <RefreshIcon
                                    class={[
                                        "w-[16px]",
                                        iconClass.value,
                                        loading.value ? "animate-spin" : ""
                                    ]}
                                    onClick={() => onReFresh()}
                                />
                            </el-tooltip>

                        </div>
                    </div>
                    {slots.default({
                        size: size.value,
                        dynamicColumns: dynamicColumns.value
                    })}
                </div>
            </>
        );
    }
});
